<template>
  <div>
    <div>
      <div>count:{{ count }}</div>
      <div>doubleCount:{{ count * 2 }}</div>
      <div>doubleCount:{{ doubleCount }}</div>
      <button @click="count += 1">+1</button>
    </div>

    <div>
      <div>title:{{ title }}</div>
      <div>title:{{ upTitle }}</div>
    </div>

    <hr />

    <div>
      <ul>
        数组:
        <li v-for="item in numbers">{{ item }}</li>
      </ul>
      <div>显示基数:{{ oddNumbers }}</div>
      <div>显示偶数:{{ evenNumbers }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
// computed:可以基于一个(多)值(派)衍生出一个新值。
// 特点：
// 1. 依赖的属性变化了，会重新计算出一个新值
// 2. 具有缓存效果。计算属性模板使用多次，其只会执行一次。
// 注意:computed不能发送异步请求
let count = ref(0);
let title = ref("csgo");
const numbers = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);

let doubleCount = computed(() => {
  console.log("多个计算属性模板，执行一次");
  return count.value * 2;
});
let upTitle = computed(() => {
  return (
    title.value.charAt(0).toUpperCase() + title.value.substring(1).toLowerCase()
  );
});

const oddNumbers = computed(() => {
  return numbers.value.filter((item) => item % 2 !== 0);
});
const evenNumbers = computed(() => {
  return numbers.value.filter((item) => item % 2 === 1);
});
</script>